<template>
    <div class="editor-page">
        <PageHeader height="50vh" :customTexts="['创作中心 | 记录你的优质博客', '将灵感变为篇章，记录此刻的想法', '始于代码，不止于代码。']"
            :imageSourcesConfig="['fj']" :backgroundChangeInterval="30000" :overlay="true" :overlayOpacity="0.4"
            :showBackgroundSwitch="false" />

        <div class="editor-main">
            <div class="editor-form-container">
                <el-form :model="articleForm" :rules="rules" ref="articleForm" label-position="top" size="small"
                    class="editor-form-wrapper">
                    <div class="editor-content">
                        <div class="content-card">
                            <div class="title-cover-layout">
                                <div class="title-section">
                                    <el-form-item label="文章标题" prop="title">
                                        <el-input v-model="articleForm.title" placeholder="请输入文章标题..."
                                            class="custom-input" />
                                    </el-form-item>
                                    <el-form-item label="文章描述" prop="summary">
                                        <el-input v-model="articleForm.summary" type="textarea" :rows="4"
                                            placeholder="请输入文章描述..." class="custom-textarea" />
                                    </el-form-item>
                                </div>
                                <div class="cover-section">
                                    <el-form-item label="封面图片" prop="cover">
                                        <div class="cover-area" @click="triggerCoverUpload">
                                            <div v-if="!articleForm.cover" class="cover-placeholder">
                                                <i class="fas fa-image"></i>
                                                <span>点击上传封面图</span>
                                            </div>
                                            <div v-else class="cover-preview">
                                                <img :src="articleForm.cover" alt="文章封面">
                                                <div class="cover-actions">
                                                    <el-tooltip effect="dark" content="预览封面" placement="top">
                                                        <el-button size="small" circle @click.stop="previewCoverImage">
                                                            <i class="fas fa-eye"></i>
                                                        </el-button>
                                                    </el-tooltip>
                                                    <el-tooltip effect="dark" content="移除封面" placement="top">
                                                        <el-button size="small" circle type="danger"
                                                            @click.stop="removeCover">
                                                            <i class="fas fa-trash"></i>
                                                        </el-button>
                                                    </el-tooltip>
                                                </div>
                                            </div>
                                        </div>
                                        <input ref="coverInput" type="file" accept="image/*" @change="handleCoverUpload"
                                            style="display: none">
                                    </el-form-item>
                                </div>
                            </div>
                        </div>

                        <div class="content-card flex-card">
                            <div class="editor-switcher-wrapper">
                                <span class="switcher-label">编辑器选择</span>
                                <el-radio-group v-model="editorType" size="small">
                                    <el-radio-button label="markdown">
                                        <i class="fab fa-markdown"></i> Markdown简洁式创作
                                    </el-radio-button>
                                    <el-radio-button label="richtext" v-if="!isMobile">
                                        <i class="fas fa-magic"></i> AI增强富文本创作
                                    </el-radio-button>
                                </el-radio-group>
                            </div>

                            <div class="markdown-tools">
                                <el-button size="mini" type="primary" @click="downloadMarkdownTemplate"
                                    icon="fas fa-download">
                                    下载Markdown模板
                                </el-button>
                                <el-button size="mini" type="success" @click="triggerMarkdownUpload"
                                    icon="fas fa-file-upload">
                                    导入Markdown文档
                                </el-button>
                                <el-button size="mini" type="danger" @click="confirmClearContent"
                                    icon="fas fa-trash-alt">
                                    清除所有内容
                                </el-button>
                                <input ref="markdownInput" type="file" accept=".md" @change="handleMarkdownUpload"
                                    style="display: none">
                            </div>

                            <el-form-item v-if="editorType === 'markdown'" label="文章内容" prop="contentMd" class="mb-20">
                                <div class="editor-container" :class="{ 'is-fullscreen': isEditorFullscreen }">
                                    <mavon-editor placeholder="输入文章内容..." style="height: 600px; width: 100%" ref="mdRef"
                                        v-model="articleForm.contentMd" @imgDel="imgDel" @imgAdd="imgAdd"
                                        :scroll-style="true" previewBackground="var(--card-bg)"
                                        toolbarsBackground="var(--card-bg)" toolbarsBackgroundImage="var(--card-bg)"
                                        @fullScreen="handleFullScreen" :default-open="'edit'" />
                                </div>
                            </el-form-item>
                            <el-form-item v-if="editorType === 'richtext'" label="文章内容" prop="content" class="mb-20">
                                <div class="editor-container rich-editor-container">
                                    <UEditorPlus v-model="articleForm.content" />
                                </div>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="editor-sidebar" :class="{ 'hidden-in-fullscreen': isEditorFullscreen }">
                        <div class="sidebar-section">
                            <h3 class="section-title">
                                <i class="fas fa-folder"></i>
                                文章分类
                            </h3>
                            <el-form-item prop="categoryId">
                                <el-select v-model="articleForm.categoryId" placeholder="请选择分类" class="custom-select">
                                    <el-option v-for="item in categories" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <div class="sidebar-section">
                            <h3 class="section-title">
                                <i class="fas fa-tags"></i>
                                文章标签
                            </h3>
                            <el-form-item prop="tagIds">
                                <el-select v-model="articleForm.tagIds" multiple filterable placeholder="请选择标签"
                                    class="custom-select">
                                    <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <div class="sidebar-section">
                            <h3 class="section-title">
                                <i class="fas fa-cog"></i>
                                文章设置
                            </h3>
                            <div class="setting-item">
                                <el-switch v-model="articleForm.isOriginal" :active-value="1" :inactive-value="0"
                                    active-text="原创文章">
                                </el-switch>
                            </div>
                            <div class="setting-item" v-if="!articleForm.isOriginal">
                                <div class="setting-label">转载地址：</div>
                                <el-form-item prop="originalUrl">
                                    <el-input v-model="articleForm.originalUrl" placeholder="请输入原文地址" size="small"
                                        class="custom-input" />
                                </el-form-item>
                            </div>
                            <div class="setting-item">
                                <div class="setting-label">关键词：</div>
                                <el-form-item prop="keywords">
                                    <el-input v-model="articleForm.keywords" placeholder="请输入关键词（多个用逗号隔开）" size="small"
                                        class="custom-input" />
                                </el-form-item>
                            </div>
                            <div class="setting-item">
                                <div class="setting-label">阅读模式：</div>
                                <el-form-item prop="readType">
                                    <el-select v-model="articleForm.readType" placeholder="请选择阅读模式"
                                        class="custom-select" style="width: 100%;">
                                        <el-option v-for="item in readTypeOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                            <i :class="item.icon" style="margin-right: 8px;"></i>
                                            <span>{{ item.label }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                        <div class="sidebar-section action-section">
                            <div class="action-buttons">
                                <el-button size="small" @click="saveDraft" icon="fas fa-save"
                                    class="custom-button draft-button">
                                    保存草稿
                                </el-button>
                                <el-button size="small" type="primary" @click="publishArticle" icon="fas fa-paper-plane"
                                    class="custom-button publish-button">
                                    {{ articleForm.status === 1 ? '更新文章' : '发布文章' }}
                                </el-button>
                            </div>
                            <div class="setting-item">
                                <el-alert
                                    :title="articleForm.status === 1 ? '提示：文章更新后将直接对访问者可见' : '提示：文章发布后将公开可见，请确认内容是否合适'"
                                    type="info" :closable="false" show-icon>
                                </el-alert>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <mj-image-preview ref="imagePreview" />
    </div>
</template>

<script>
import { uploadFileApi, deleteFileApi, importMarkdownApi, downloadMarkdownTemplateApi } from '@/api/file'
import { createArticleApi, updateArticleApi, getArticleInfoApi } from '@/api/article'
import { getTagsApi, getCategoriesApi } from '@/api/tags'
import { getDictDataApi } from '@/api/dict'
import PageHeader from '@/components/PageHeader/index.vue'
import UEditorPlus from '@/components/UEditorPlus/index.vue'
import markdownit from 'markdown-it'
import TurndownService from 'turndown'

export default {
    name: 'Editor',
    components: {
        PageHeader,
        UEditorPlus
    },
    data() {
        return {
            articleForm: {
                title: '',
                summary: '',
                content: '',
                contentMd: '',
                cover: '',
                keywords: '',
                isOriginal: 1,
                originalUrl: '',
                categoryId: '',
                tagIds: [],
                status: '',
                readType: 0, // 0: 公开, 1: 评论, 2: 点赞, 3: 评论+点赞
                updateTime: null
            },
            rules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                    { min: 5, max: 100, message: '标题长度应在5-100个字符之间', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: '请输入文章描述', trigger: 'blur' },
                    { min: 10, max: 500, message: '描述长度应在10-500个字符之间', trigger: 'blur' }
                ],
                contentMd: [
                    {
                        validator: (rule, value, callback) => {
                            if (this.editorType !== 'markdown') {
                                return callback();
                            }
                            if (!value) {
                                callback(new Error('请输入文章内容'));
                                return;
                            }

                            // 检查最小长度
                            if (value.length < 50) {
                                callback(new Error('文章内容至少需要50个字符'));
                                return;
                            }

                            // 检查重复字符
                            const repeatedCharPattern = /(.)\1{4,}/;

                            // 检查内容是否有意义
                            const meaninglessPattern = /^[a-zA-Z]{10,}$/;
                            if (meaninglessPattern.test(value)) {
                                callback(new Error('文章内容似乎没有实际意义，请认真编写'));
                                return;
                            }


                            callback();
                        },
                        trigger: ['blur', 'change']
                    }
                ],
                content: [
                    {
                        validator: (rule, value, callback) => {
                            if (this.editorType !== 'richtext') {
                                return callback();
                            }
                            // UEditor might return this for an empty editor
                            if (!value || value === '<p><br></p>' || value.length < 50) {
                                callback(new Error('文章内容至少需要50个字符'));
                            } else {
                                callback();
                            }
                        },
                        trigger: ['blur', 'change']
                    }
                ],
                cover: [
                    { required: true, message: '请上传封面图片', trigger: 'change' }
                ],
                categoryId: [
                    { required: true, message: '请选择文章分类', trigger: 'change' }
                ],
                tagIds: [
                    { required: true, message: '请选择文章标签', trigger: 'change' },
                    {
                        validator: (rule, value, callback) => {
                            if (value.length > 3) {
                                callback(new Error('最多只能选择3个标签'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change'
                    }
                ],
                originalUrl: [
                    { required: true, message: '请输入原文地址', trigger: 'blur' },
                    { type: 'url', message: '请输入有效的URL地址', trigger: 'blur' }
                ],
                keywords: [
                    {
                        validator: (rule, value, callback) => {
                            if (value && value.split(',').length > 5) {
                                callback(new Error('关键词最多不超过5个'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            },
            categories: [],
            tags: [],
            isSubmitting: false,
            statusList: [],
            readTypeOptions: [
                { value: 0, label: '公开阅读', icon: 'fas fa-globe-asia' },
                { value: 1, label: '评论后阅读', icon: 'fas fa-comment-dots' },
                { value: 2, label: '点赞后阅读', icon: 'fas fa-thumbs-up' },
                { value: 3, label: '评论并点赞后阅读', icon: 'fas fa-user-lock' }
            ],
            isEditorFullscreen: false,
            editorType: 'markdown', // markdown or richtext
            isMobile: false,
            bodyStyleObserver: null // 添加一个观察器引用
        }
    },
    mounted() {
        this.checkIsMobile();
        window.addEventListener('resize', this.checkIsMobile);

        // 创建一个MutationObserver来监视body的style属性变化
        this.bodyStyleObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'style' && this.isEditorFullscreen) {
                    // 如果body的style被修改且编辑器处于全屏状态，强制恢复滚动条
                    this.restoreScrollbar();
                }
            });
        });

        // 开始观察body的style属性变化
        this.bodyStyleObserver.observe(document.body, {
            attributes: true,
            attributeFilter: ['style']
        });
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkIsMobile);

        // 断开MutationObserver连接
        if (this.bodyStyleObserver) {
            this.bodyStyleObserver.disconnect();
        }

        // 确保在组件销毁时恢复滚动条
        document.body.style.removeProperty('overflow');
        document.documentElement.style.removeProperty('overflow');
    },
    created() {
        const urlEditorType = this.$route.query.editor_type;
        const preferredEditorType = localStorage.getItem('preferred-editor-type');
        let editorDetermined = false;

        // 优先使用URL中的编辑器类型
        if (urlEditorType && (urlEditorType === 'markdown' || urlEditorType === 'richtext')) {
            if (!(window.innerWidth <= 768 && urlEditorType === 'richtext')) {
                this.editorType = urlEditorType;
                editorDetermined = true;
            }
        }
        // 其次使用localStorage中的偏好设置
        else if (preferredEditorType && (preferredEditorType === 'markdown' || preferredEditorType === 'richtext')) {
            if (!(window.innerWidth <= 768 && preferredEditorType === 'richtext')) {
                this.editorType = preferredEditorType;
                editorDetermined = true;
            }
        }

        this.articleForm.id = this.$route.query.id;

        // 定义需要预先加载的主数据请求
        const masterDataPromises = [
            getCategoriesApi(),
            getTagsApi()
        ];

        // 字典数据可以独立加载
        getDictDataApi(['article_status']).then(res => {
            this.statusList = res.data;
        });

        // 等待所有主数据加载完成后再处理文章详情
        Promise.all(masterDataPromises).then(([categoriesRes, tagsRes]) => {
            this.categories = categoriesRes.data;
            this.tags = tagsRes.data;

            // 如果是编辑模式，现在获取文章详情
            if (this.articleForm.id) {
                getArticleInfoApi(this.articleForm.id).then(res => {
                    const articleData = res.data;

                    // 根据内容判断编辑器类型（如果尚未确定）
                    if (!editorDetermined) {
                        if (articleData.contentMd && articleData.contentMd.length > 0) {
                            this.editorType = 'markdown';
                        } else if (articleData.content && articleData.content.length > 0) {
                            this.editorType = 'richtext';
                        }
                    }

                    // 健壮性处理：确保 tagIds 存在，以正确绑定 v-model
                    // 如果API因某些原因未返回 tagIds，则从 tags 对象数组中生成它
                    if ((!articleData.tagIds || articleData.tagIds.length === 0) &&
                        articleData.tags && Array.isArray(articleData.tags) && articleData.tags.length > 0) {
                        articleData.tagIds = articleData.tags.map(tag => tag.id);
                    }

                    // 将获取到的数据赋值给表单
                    this.articleForm = articleData;
                });
            }
        });
    },
    methods: {
        checkIsMobile() {
            const mobile = window.innerWidth <= 768;
            // Only act on change
            if (mobile !== this.isMobile) {
                this.isMobile = mobile;
                if (this.isMobile && this.editorType === 'richtext') {
                    this.editorType = 'markdown';
                    this.$message.warning({
                        message: '富文本编辑器不适用移动端，已切换至Markdown。如需编辑原文，请使用桌面设备。',
                        duration: 5000,
                        showClose: true,
                    });
                }
            }
        },
        /**
         * 处理编辑器全屏状态变化
         */
        handleFullScreen(status) {
            this.isEditorFullscreen = status;

            if (status) {
                // 进入全屏模式时
                this.$nextTick(() => {
                    this.restoreScrollbar();

                    // 设置一个定时器，以防初始设置被覆盖
                    setTimeout(() => {
                        this.restoreScrollbar();
                    }, 100);
                });
            } else {
                // 退出全屏模式时
                document.body.style.removeProperty('overflow');
                document.documentElement.style.removeProperty('overflow');
            }
        },

        /**
         * 恢复页面滚动条
         */
        restoreScrollbar() {
            // 使用!important强制覆盖内联样式
            document.body.style.setProperty('overflow', 'auto', 'important');
            document.documentElement.style.setProperty('overflow', 'auto', 'important');

            // 查找并移除可能存在的禁用滚动条的类
            document.body.classList.remove('no-scroll', 'overflow-hidden');
            document.documentElement.classList.remove('no-scroll', 'overflow-hidden');

            // 查找mavon-editor可能添加的全屏遮罩
            const fullscreenMask = document.querySelector('.v-note-mask');
            if (fullscreenMask) {
                fullscreenMask.style.setProperty('position', 'fixed', 'important');
                fullscreenMask.style.setProperty('z-index', '1998', 'important'); // 确保在编辑器下面，但在其他元素上面
                fullscreenMask.style.setProperty('top', '0', 'important');
            }

            // 确保编辑器内部的滚动区域可以滚动
            setTimeout(() => {
                const editArea = document.querySelector('.v-note-edit.divarea-wrapper');
                const showArea = document.querySelector('.v-note-show');

                if (editArea) {
                    editArea.style.setProperty('overflow', 'auto', 'important');
                    const textArea = editArea.querySelector('.auto-textarea-input');
                    if (textArea) {
                        textArea.style.setProperty('overflow', 'auto', 'important');
                    }
                }

                if (showArea) {
                    showArea.style.setProperty('overflow', 'auto', 'important');
                }
            }, 200);
        },
        /**
         * 保存草稿
         */
        async saveDraft() {
            // 设置为草稿状态(2)
            this.articleForm.status = 2;
            this.submitArticle(false); // 传入false表示不进行严格校验
        },
        /**
         * 发布文章
         */
        async publishArticle() {
            // 设置为发布状态(1)
            this.articleForm.status = 1;
            this.submitArticle(true); // 传入true表示进行严格校验
        },
        /**
         * 提交文章
         * @param {boolean} strictValidate 是否进行严格验证
         */
        submitArticle(strictValidate = true) {
            // 保存用户偏好的编辑器类型
            localStorage.setItem('preferred-editor-type', this.editorType);

            if (this.isSubmitting) return;

            // 根据编辑器类型处理内容
            if (this.editorType === 'markdown') {
                // 获取Markdown渲染的HTML内容
                this.articleForm.content = this.$refs.mdRef.d_render;
            } else {
                // 如果是富文本编辑器，将HTML内容转为Markdown
                const turndownService = new TurndownService()
                this.articleForm.contentMd = turndownService.turndown(this.articleForm.content)
            }

            // 当使用富文本编辑器时，`content` 已经通过 `v-model` 绑定。
            // 我们不会清除 `contentMd`，以防它是从导入的 Markdown 文件中获得的。

            // 草稿状态时只进行基本验证
            if (!strictValidate) {
                // 草稿状态只验证标题，允许其他字段为空
                if (!this.articleForm.title) {
                    this.$message.warning('请至少输入文章标题');
                    return;
                }

                // 设置默认值防止提交失败
                if (!this.articleForm.summary) {
                    this.articleForm.summary = this.articleForm.title.substring(0, 100);
                }

                this.isSubmitting = true;

                const api = this.articleForm.id ? updateArticleApi : createArticleApi;

                api(this.articleForm)
                    .then(res => {
                        this.$message.success('草稿保存成功');
                        this.$router.push('/user/profile');
                    })
                    .catch(err => {
                        console.error('保存草稿失败:', err);
                        this.$message.error(err.message || '保存失败，请稍后重试');
                    })
                    .finally(() => {
                        this.isSubmitting = false;
                    });

                return;
            }

            // 正常发布时进行完整验证
            this.$refs.articleForm.validate(valid => {
                if (!valid) {
                    this.$message.warning('表单验证失败，请检查填写的内容');
                    return;
                }

                this.isSubmitting = true;

                const api = this.articleForm.id ? updateArticleApi : createArticleApi;
                const successMessage = this.articleForm.id ? '文章更新成功' : '文章发布成功';
                const errorMessage = this.articleForm.id ? '更新失败，请稍后重试' : '发布失败，请稍后重试';

                api(this.articleForm)
                    .then(res => {
                        this.$message.success(successMessage);
                        this.$router.push('/user/profile');
                    })
                    .catch(err => {
                        console.error('提交文章失败:', err);
                        this.$message.error(err.message || errorMessage);
                    })
                    .finally(() => {
                        this.isSubmitting = false;
                    });
            });
        },
        /**
         * 删除图片
         */
        imgDel(pos, $file) {
            console.log(pos)
            deleteFileApi(pos[0]).then(res => {
                this.$refs.mdRef.$img2Url(pos, '');
            });
        },
        /**
         * 添加图片
         */
        imgAdd(pos, $file) {
            const formdata = new FormData();
            formdata.append("file", $file);
            uploadFileApi(formdata, 'article-content').then(res => {
                this.$refs.mdRef.$img2Url(pos, res.data);
            });
        },
        /**
         * 触发封面上传
         */
        triggerCoverUpload() {
            this.$refs.coverInput.click()
        },
        /**
         * 封面上传
         */
        handleCoverUpload(e) {
            const file = e.target.files[0]
            if (!file) return

            const formData = new FormData()
            formData.append('file', file)

            uploadFileApi(formData, 'article-cover').then(res => {
                if (res.code === 200) {
                    this.articleForm.cover = res.data
                    this.$message.success('上传成功')
                } else {
                    this.$message.error(res.message || '上传失败')
                }
            }).catch(error => {
                this.$message.error('上传失败，请重试')
            })

            // 清空 input 的值，这样可以重复上传同一个文件
            e.target.value = ''
        },
        /**
         * 删除封面
         */
        removeCover() {
            this.articleForm.cover = ''
        },
        /**
         * 下载Markdown模板
         */
        downloadMarkdownTemplate() {
            this.$message.info('正在准备下载...');
            downloadMarkdownTemplateApi().then(response => {
                // response.data 现在是 blob 对象
                const blob = new Blob([response.data], { type: 'text/markdown;charset=utf-8' });

                // 从响应头中获取文件名
                const contentDisposition = response.headers['content-disposition'];
                let fileName = 'Markdown模板文件-article.md'; // 默认文件名
                if (contentDisposition) {
                    const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
                    if (fileNameMatch && fileNameMatch.length > 1) {
                        fileName = decodeURIComponent(fileNameMatch[1]);
                        // 文件名已经包含时间戳，不需要再添加
                        const link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(link.href);
                        this.$message.success('模板已开始下载');
                        return;
                    }
                }

                // 如果没有从响应头获取到文件名，则使用默认文件名并添加时间戳
                const timestamp = new Date().getTime();
                const fileNameParts = fileName.split('.');
                const extension = fileNameParts.pop();
                const nameWithoutExt = fileNameParts.join('.');
                const uniqueFileName = `${nameWithoutExt}-${timestamp}.${extension}`;

                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = uniqueFileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(link.href);
                this.$message.success('模板已开始下载');
            }).catch(error => {
                console.error('下载模板失败:', error);
                this.$message.error('下载模板失败，请检查网络或联系管理员');
            });
        },
        /**
         * 触发Markdown文件上传
         */
        triggerMarkdownUpload() {
            this.$refs.markdownInput.click();
        },
        /**
         * 处理Markdown文件上传
         */
        handleMarkdownUpload(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', file);

            this.$message.info('正在解析Markdown文档...');

            // 调用导入API
            importMarkdownApi(formData).then(res => {
                if (res.code === 200) {
                    const data = res.data;

                    // 填充表单数据
                    this.articleForm.title = data.title || this.articleForm.title;
                    this.articleForm.summary = data.summary || this.articleForm.summary;
                    this.articleForm.contentMd = data.contentMd || this.articleForm.contentMd;
                    this.articleForm.keywords = data.keywords || this.articleForm.keywords;
                    this.articleForm.isOriginal = data.isOriginal !== undefined ? data.isOriginal : this.articleForm.isOriginal;
                    this.articleForm.originalUrl = data.originalUrl || this.articleForm.originalUrl;

                    if (data.cover) {
                        this.articleForm.cover = data.cover;
                    }

                    // 根据当前编辑器类型，更新对应的内容
                    if (this.editorType === 'richtext') {
                        const md = markdownit();
                        this.articleForm.content = md.render(this.articleForm.contentMd);
                    } else {
                        // 导入后，同步更新富文本编辑器的内容
                        this.$nextTick(() => {
                            if (this.$refs.mdRef && this.$refs.mdRef.d_render) {
                                this.articleForm.content = this.$refs.mdRef.d_render;
                            }
                        });
                    }

                    // 显示导入成功信息
                    this.$message.success(data.message || 'Markdown文档导入成功');

                    // 如果有警告信息，显示警告
                    if (data.warnings && data.warnings.length > 0) {
                        this.$notify({
                            title: '导入警告',
                            message: '导入过程中有一些问题需要注意，请查看详情',
                            type: 'warning',
                            duration: 10000,
                            showClose: true,
                            dangerouslyUseHTMLString: true,
                            onClose: function () { },
                            onClick: function () { }
                        });

                        data.warnings.forEach(function (warning) {
                            this.$notify.warning({
                                title: '导入警告',
                                message: warning,
                                duration: 10000,
                                showClose: true
                            });
                        }, this);
                    }
                } else {
                    this.$message.error(res.msg || '导入Markdown文档失败');
                }
            }).catch(error => {
                console.error('导入Markdown文档失败:', error);
                this.$message.error(error.message || '导入失败，请稍后重试');
            }).finally(() => {
                // 清空文件输入框，以便下次选择同一个文件时也能触发change事件
                e.target.value = '';
            });
        },
        /**
         * 确认清除所有内容
         */
        confirmClearContent() {
            this.$confirm('确定要清除所有内容吗？此操作不可恢复！', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.clearAllContent();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消清除操作'
                });
            });
        },

        /**
         * 清除所有内容
         */
        clearAllContent() {
            // 重置所有表单字段
            this.articleForm.title = '';
            this.articleForm.summary = '';
            this.articleForm.content = '';
            this.articleForm.contentMd = '';
            this.articleForm.cover = '';
            this.articleForm.keywords = '';
            this.articleForm.isOriginal = 1; // 保持默认值为原创
            this.articleForm.originalUrl = '';
            this.articleForm.categoryId = '';
            this.articleForm.tagIds = [];

            this.$nextTick(() => {
                // 重新渲染编辑器
                if (this.editorType === 'markdown' && this.$refs.mdRef) {
                    this.$refs.mdRef.d_render = '';
                }

                // 重置表单验证
                if (this.$refs.articleForm) {
                    this.$refs.articleForm.clearValidate();
                }
            });

            this.$message.success('所有内容已清除');
        },
        /**
         * 预览封面图片
         */
        previewCoverImage() {
            if (this.articleForm.cover) {
                this.$refs.imagePreview.show([this.articleForm.cover], 0);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.editor-page {
    background-color: var(--page-bg);
    min-height: 100vh;
    padding-bottom: 40px;
    position: relative;
}

.editor-main {
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.editor-form-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.editor-form-wrapper {
    margin: -100px auto 0;
    position: relative;
    z-index: 10;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 32px;
    display: flex;
    gap: 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

// 编辑器容器样式
.editor-container {
    position: relative;
    transition: all 0.3s ease;

    &.rich-editor-container {
        margin-bottom: 20px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

        .ai-indicator {
            position: absolute;
            bottom: 0;
            right: 0;
            background: linear-gradient(135deg, $primary, darken($primary, 20%));
            color: white;
            padding: 8px 16px;
            border-top-left-radius: 12px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: 0.85;
            z-index: 10;
            transition: all 0.3s ease;

            &:hover {
                opacity: 1;
                transform: translateY(-3px);
            }

            i {
                font-size: 14px;
            }
        }
    }

    &.is-fullscreen {
        position: fixed;
        // 在桌面端提供一个安全边距，避免遮挡顶部导航栏
        top: 100px; // 增加顶部边距，确保操作栏不被遮挡
        left: 50px;
        right: 50px;
        bottom: 30px;
        z-index: 1999; // 提高z-index，确保在PageHeader之上
        background-color: var(--card-bg);
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        overflow: auto; // 确保容器可滚动

        // 添加一个背景遮罩层，突出编辑器
        &::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(3px);
            z-index: -1;
        }

        :deep(.v-note-wrapper) {
            // 高度占满 .is-fullscreen 容器
            height: 100% !important;
            max-height: 100% !important;
            border-radius: 12px !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
            overflow: visible !important; // 确保内容溢出时可见

            .v-note-panel {
                height: calc(100% - 40px) !important;
                overflow: visible !important; // 确保内容溢出时可见
            }

            .v-note-edit.divarea-wrapper,
            .v-note-show {
                height: calc(100% - 40px) !important;
                padding: 20px !important;
                overflow: auto !important; // 确保编辑区域可滚动

                .auto-textarea-input {
                    font-size: 16px !important;
                    line-height: 1.8 !important;
                    overflow: auto !important; // 确保输入区域可滚动
                }
            }

            .v-note-show {
                padding: 20px 30px !important;
                overflow: auto !important; // 确保预览区域可滚动

                p,
                li {
                    font-size: 16px !important;
                    line-height: 1.8 !important;
                }

                h1,
                h2,
                h3 {
                    margin-top: 20px !important;
                    margin-bottom: 16px !important;
                }
            }

            .v-note-op {
                background-color: var(--card-bg) !important;
                border-bottom: 1px solid var(--border-color) !important;
                position: sticky !important; // 使操作栏固定在顶部
                top: 0 !important;
                z-index: 10 !important;

                .op-icon.selected {
                    color: $primary !important;
                }
            }
        }
    }
}

// 在全屏模式下隐藏侧边栏
.hidden-in-fullscreen {
    display: none !important;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.editor-content {
    flex: 1;
    min-width: 0;

    .content-card {
        background: transparent;
        border-radius: 8px;
        padding: 0;
        margin-bottom: 24px;
        transition: all 0.3s ease;

        &:last-child {
            margin-bottom: 0;
        }

        &.flex-card {
            flex: 1;
            display: flex;
            flex-direction: column;

            .editor-switcher-wrapper {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                gap: 16px;

                .switcher-label {
                    font-size: 15px;
                    color: var(--text-primary);
                    font-weight: 500;
                    letter-spacing: 0.3px;
                }

                :deep(.el-radio-group) {
                    display: flex;
                    gap: 10px;
                }

                :deep(.el-radio-button__inner) {
                    border: 1px solid var(--border-color) !important;
                    background: var(--card-bg);
                    color: var(--text-secondary);
                    border-radius: 10px !important;
                    box-shadow: none !important;
                    transition: all 0.3s ease;
                    font-size: 14px;
                    font-weight: 500;
                    padding: 10px 20px;

                    i {
                        margin-right: 8px;
                        font-size: 15px;
                    }

                    &:hover {
                        color: $primary;
                        border-color: rgba($primary, 0.5) !important;
                        box-shadow: 0 4px 12px rgba($primary, 0.1) !important;
                        transform: translateY(-2px);
                    }
                }

                :deep(.el-radio-button:first-child .el-radio-button__inner) {
                    border-radius: 10px !important;
                }

                :deep(.el-radio-button:last-child .el-radio-button__inner) {
                    border-radius: 10px !important;
                }

                :deep(.el-radio-button__orig-radio:checked+.el-radio-button__inner) {
                    background-color: $primary;
                    border-color: $primary !important;
                    color: white;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 14px rgba($primary, 0.3) !important;
                }
            }

            :deep(.el-form-item) {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-bottom: 0;

                .el-form-item__content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .el-textarea {
                        flex: 1;
                        display: flex;

                        textarea {
                            flex: 1;
                            resize: none;
                        }
                    }
                }
            }
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 20px;

        .el-form-item__label {
            padding-bottom: 10px;
            font-size: 15px;
            color: var(--text-primary);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .el-form-item__error {
            font-size: 12px;
            padding-top: 4px;
        }
    }

    .title-cover-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;

        .title-section {
            flex: 1;
        }

        .cover-section {
            width: 240px;
            flex-shrink: 0;
        }
    }

    .cover-area {
        width: 100%;
        height: 135px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        background: var(--hover-bg);
        border: 1px dashed var(--border-color);
        transition: all 0.3s;

        &:hover {
            border-color: $primary;
            box-shadow: 0 0 0 2px rgba($primary, 0.1);
            transform: translateY(-2px);
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.02));
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        &:hover::after {
            opacity: 1;
        }
    }

    .cover-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--text-secondary);

        i {
            font-size: 28px;
            color: rgba($primary, 0.7);
            transition: all 0.3s;
        }

        span {
            font-size: 14px;
            transition: all 0.3s;
        }

        &:hover {
            i {
                transform: scale(1.1);
                color: $primary;
            }

            span {
                color: var(--text-primary);
            }
        }
    }

    .cover-preview {
        height: 100%;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        &:hover img {
            transform: scale(1.05);
        }

        .cover-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            opacity: 0;
            transition: all 0.3s;
            transform: translateY(-5px);
            display: flex;
            gap: 8px;
        }

        &:hover .cover-actions {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.editor-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;

    .sidebar-section {
        background: var(--hover-bg);
        border-radius: 14px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
        padding: 22px;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        &.action-section {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;

            &:hover {
                transform: none;
            }
        }

        .section-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border-color);

            i {
                font-size: 16px;
                color: $primary;
                opacity: 0.9;
            }
        }

        .setting-item {
            padding: 14px 0;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;

            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            &:first-child {
                padding-top: 0;
            }

            .setting-label {
                font-size: 14px;
                color: var(--text-secondary);
                margin-bottom: 8px;
                font-weight: 500;
            }

            :deep(.el-form-item) {
                margin-bottom: 0;
                width: 100%;
            }
        }
    }
}

:deep(.el-alert) {
    border-radius: 8px;
    padding: 12px;

    .el-alert__icon {
        font-size: 16px;
    }

    .el-alert__title {
        font-size: 13px;
        line-height: 1.5;
    }
}

// 自定义表单元素样式
:deep(.custom-input) {
    .el-input__inner {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--hover-bg);
        padding: 12px 15px;
        transition: all 0.3s;
        font-size: 14px;
        color: var(--text-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

        &::placeholder {
            color: var(--text-secondary);
            opacity: 0.6;
        }

        &:focus {
            border-color: $primary;
            box-shadow: 0 0 0 2px rgba($primary, 0.1);
            background-color: var(--card-bg);
        }

        &:hover {
            border-color: $primary;
        }
    }
}

:deep(.custom-textarea) {
    .el-textarea__inner {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--hover-bg);
        padding: 12px 15px;
        transition: all 0.3s;
        resize: none;
        font-size: 14px;
        color: var(--text-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        line-height: 1.6;

        &::placeholder {
            color: var(--text-secondary);
            opacity: 0.6;
        }

        &:focus {
            border-color: $primary;
            box-shadow: 0 0 0 2px rgba($primary, 0.1);
            background-color: var(--card-bg);
        }

        &:hover {
            border-color: $primary;
        }
    }
}

:deep(.custom-select) {
    .el-input__inner {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background-color: var(--hover-bg);
        padding: 12px 15px;
        transition: all 0.3s;
        font-size: 14px;
        color: var(--text-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

        &:focus {
            border-color: $primary;
            box-shadow: 0 0 0 2px rgba($primary, 0.1);
            background-color: var(--card-bg);
        }

        &:hover {
            border-color: $primary;
        }
    }

    .el-select-dropdown__item {
        padding: 10px 16px;
        font-size: 14px;

        &.selected {
            color: $primary;
            font-weight: 500;
        }

        &:hover {
            background-color: rgba($primary, 0.08);
        }
    }
}

// 自定义按钮样式
:deep(.custom-button) {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s;
    border: none;
    font-size: 14px;
    letter-spacing: 0.3px;

    &.draft-button {
        background-color: var(--hover-bg);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);

        &:hover {
            background-color: darken(#f5f7fa, 5%);
            color: var(--text-primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
    }

    &.publish-button {
        background-color: $primary;
        color: white;

        &:hover {
            background-color: darken($primary, 10%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba($primary, 0.3);
        }
    }
}

@media screen and (max-width: 1200px) {
    .editor-form-wrapper {
        flex-direction: column;
        margin-top: -80px;
        padding: 24px;
        gap: 24px;
    }

    .editor-sidebar {
        width: 100%;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .editor-main {
        padding: 0;
    }

    .editor-form-container {
        padding: 0;
    }

    .editor-form-wrapper {
        padding: 20px 16px;
        margin-top: -50px;
        gap: 20px;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .editor-content {
        .content-card {
            padding: 0;
            margin-bottom: 16px;
            width: 100%;
        }

        .cover-area {
            height: 120px;
        }
    }

    .editor-sidebar {
        gap: 16px;
        width: 100%;

        .sidebar-section {
            padding: 16px;
            border-radius: 8px;
            width: 100%;
            box-sizing: border-box;
        }
    }

    .title-cover-layout {
        flex-direction: column;
        gap: 16px;

        .cover-section,
        .title-section {
            width: 100%;
        }
    }

    :deep(.el-form-item) {
        width: 100%;
    }

    :deep(.custom-input),
    :deep(.custom-textarea),
    :deep(.custom-select) {
        width: 100%;
    }

    :deep(.setting-item) {
        width: 100%;
    }

    .action-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;

        .el-button {
            width: 100%;
            justify-content: center;
            height: 44px;
            margin: 0;
            padding: 0 20px;
            display: flex;
            align-items: center;

            i {
                margin-right: 8px;
            }
        }
    }

    // 移动端编辑器优化
    .v-note-wrapper {
        height: 500px !important;
    }

    // Restore fixed height for UEditorPlus on mobile for stability
    :deep(.ueditor-plus-container .vue-ueditor-wrap) {
        height: 500px !important;
    }

    .rich-editor-container {
        margin-bottom: 15px !important;
    }

    .ai-indicator {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .editor-container.is-fullscreen {
        :deep(.v-note-wrapper) {
            .v-note-op {
                padding: 8px 5px !important;
            }

            .v-note-edit.divarea-wrapper {
                padding: 15px !important;
            }

            .v-note-show {
                padding: 15px !important;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .editor-form-wrapper {
        margin-top: -40px;
        padding: 16px 12px;
        border-radius: 12px 12px 0 0;
    }

    .editor-main {
        padding: 0;
    }

    :deep(.v-note-wrapper) {
        min-height: 300px !important;
        height: 350px !important;
    }

    .editor-sidebar .sidebar-section .section-title {
        font-size: 14px;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .editor-container.is-fullscreen {
        :deep(.v-note-wrapper) {
            .v-note-op {
                .op-btn {
                    padding: 0 5px !important;
                }
            }
        }
    }
}

// Markdown编辑器样式优化
.v-note-wrapper {
    background: var(--card-bg) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 550px !important; // 增加默认高度

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

:deep(.content-input-wrapper) {
    background: var(--card-bg) !important;

    .auto-textarea-input,
    .no-border,
    .no-resize {
        color: var(--text-primary) !important;
        background: var(--card-bg) !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    }
}

:deep(.v-note-op) {
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--hover-bg) !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: 5px !important;

    .op-icon {
        color: var(--text-secondary) !important;
        transition: all 0.2s;

        &:hover {
            color: $primary !important;
        }
    }

    .op-btn {
        transition: all 0.2s;

        &:hover {
            background: rgba($primary, 0.1) !important;
        }
    }
}

:deep(.v-note-panel) {
    border-top: 1px solid var(--border-color) !important;

    .v-note-edit.divarea-wrapper {
        padding: 15px !important;
    }

    .v-note-show {
        padding: 15px 20px !important;
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;

        p,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--text-primary) !important;
        }

        a {
            color: $primary !important;
        }

        pre {
            background-color: var(--hover-bg) !important;
            border-radius: 6px !important;
        }

        code {
            color: #d63384 !important;
            background-color: rgba(0, 0, 0, 0.03) !important;
            padding: 2px 4px !important;
            border-radius: 3px !important;
        }

        blockquote {
            border-left: 4px solid var(--primary) !important;
            padding: 10px 15px !important;
            color: var(--text-secondary) !important;
            background-color: rgba(0, 0, 0, 0.03) !important;
            margin: 16px 0 !important;
        }
    }
}

.editor-container.is-fullscreen {
    // 在移动端，全屏模式应该覆盖整个屏幕以获得更好的体验
    top: 10px; // 给顶部留出一点空间，避免完全覆盖导航栏
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px 10px 0 0; // 只在顶部添加圆角
    z-index: 1999; // 提高z-index，确保在PageHeader之上

    :deep(.v-note-wrapper) {
        border-radius: 10px 10px 0 0 !important; // 只在顶部添加圆角

        .v-note-op {
            padding: 8px 5px !important;
            position: sticky !important; // 使操作栏固定在顶部
            top: 0 !important;
            z-index: 10 !important;
        }
    }
}

.markdown-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 16px;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--hover-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.markdown-tools:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.markdown-tools .el-button {
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.markdown-tools .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 优化编辑器滚动体验，增加底部内边距 */
:deep(.auto-textarea-input) {
    padding-bottom: 50vh !important;
    height: 100% !important;
    overflow: auto !important;
    box-sizing: border-box;
}

:deep(.v-note-show) {
    padding-bottom: 50vh !important;
    height: 100%;
    overflow: auto !important;
    box-sizing: border-box;
}

/* 优化编辑器整体外观 */
:deep(.v-note-wrapper) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

:deep(.v-note-wrapper:hover) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

:deep(.v-note-panel) {
    border-color: var(--border-color) !important;
}

:deep(.v-note-edit.divarea-wrapper) {
    border-right: 1px solid var(--border-color) !important;
}

/* 优化编辑器工具栏 */
:deep(.v-note-op) {
    background: var(--hover-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 5px 10px !important;
}

:deep(.v-note-op .op-icon) {
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
}

:deep(.v-note-op .op-icon:hover) {
    color: var(--primary) !important;
    transform: scale(1.1) !important;
}

/* 优化预览区域样式 */
:deep(.v-note-show .v-show-content) {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    padding: 20px !important;
    line-height: 1.8 !important;
}

:deep(.v-note-show .v-show-content h1,
    .v-note-show .v-show-content h2,
    .v-note-show .v-show-content h3) {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
}

:deep(.v-note-show .v-show-content pre) {
    background-color: var(--hover-bg) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border: 1px solid var(--border-color) !important;
}

:deep(.v-note-show .v-show-content code) {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #d63384 !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
}

:deep(.v-note-show .v-show-content blockquote) {
    border-left: 4px solid var(--primary) !important;
    padding: 10px 15px !important;
    color: var(--text-secondary) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    margin: 16px 0 !important;
}

:deep(.v-note-show .v-show-content table) {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 16px 0 !important;
    border: 1px solid var(--border-color) !important;
}

:deep(.v-note-show .v-show-content th,
    .v-note-show .v-show-content td) {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
}

:deep(.v-note-show .v-show-content th) {
    background-color: var(--hover-bg) !important;
    font-weight: 600 !important;
}

/* 富文本编辑器样式优化 */
.rich-editor-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.rich-editor-container:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
</style>